import { AfterViewInit, Component, EventEmitter, OnDestroy, OnInit, Output, Renderer2, ViewChild } from '@angular/core';
import { ConfigModule } from 'src/app/config.module';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
import { DragDrop } from '@angular/cdk/drag-drop';
import { NoticeService } from '../../service/notice.service';

@Component({
    selector: 'app-notice-option',
    templateUrl: './index.html',
    styleUrls: ['./index.scss'],
})
export class NoticeOptionComponent implements OnInit, AfterViewInit, OnDestroy {
    @ViewChild('modalContent') modalContent: any;
    @ViewChild('modalFooter') modalFooter: any;
    @Output() getMainList: EventEmitter<any> = new EventEmitter<any>();
    modalLoadingState: boolean;
    saveLoadingState: boolean;
    dataForm: FormGroup;
    entity: any = {} as any;
    roleModal: NzModalRef; //操作弹窗
    constructor(
        public _config: ConfigModule,
        private _formBuilder: FormBuilder,
        private _nzModalService: NzModalService,
        private _renderer2: Renderer2,
        private _dragDrop: DragDrop,
        private mainService: NoticeService
    ) {
        // 表单验证
        this.dataForm = this._formBuilder.group({
            noticeTitle: ['',Validators.required],
            noticeType: ['',Validators.required],
            status: [''],
        });
    }

    ngOnInit() {
    }

    ngAfterViewInit() {}

    ngOnDestroy() {
    }

    /**
     * 打开操作弹窗
     */
    onModalOpen(id: string) {
        this.entity.roleId = id;
        this.roleModal = this._nzModalService.create({
            nzTitle: id ? '编辑通知' : '新增通知',
            nzContent: this.modalContent,
            nzFooter: this.modalFooter,
            nzWidth: this._config.modalWidth,
            nzBodyStyle: this._config.modalContentHeight,
        });

        this.roleModal.afterOpen.subscribe(() => {
            const modalDragRef = this._renderer2.selectRootElement('.ant-modal-content', true);
            const modalDragHeaderRef = this._renderer2.selectRootElement('.ant-modal-header', true);

            const modalDrag = this._dragDrop.createDrag(modalDragRef);
            modalDrag.withHandles([modalDragHeaderRef]);
            modalDrag.withBoundaryElement(document.body);
        });

        this.roleModal.afterClose.subscribe(() => {
            this.dataForm.reset();
            for (const key of Object.keys(this.entity)) {
                delete this.entity[key];
            }
        });

        if (id) {
            this.modalLoadingState = true;
            this.mainService.get(id).subscribe((res) => {
                if (res.success) {
                    this.entity = res.data;
                }
            }).add(()=>this.modalLoadingState = false);
        }
    }

    /**
     * 保存用户
     */
    onSaveUser() {
        if (this.entity.userId) {
            this.mainService.update(this.entity).subscribe((res) => {
                if (res.success) {
                    this.roleModal.close();
                    this.dataForm.reset();
                    for (const key of Object.keys(this.entity)) {
                        delete this.entity[key];
                    }
                    this.getMainList.emit();
                }
            });
        } else {
            this.mainService.add(this.entity).subscribe((res) => {
                if (res.success) {
                    this.roleModal.close();
                    this.dataForm.reset();
                    for (const key of Object.keys(this.entity)) {
                        delete this.entity[key];
                    }
                    this.getMainList.emit();
                }
            });
        }
    }
}
